<template>
  <div>
    <van-nav-bar title="我的申请" left-arrow fixed>
      <template #right>
        <div class="iconfont headerSearchIcon">&#xe628;</div>
      </template>
    </van-nav-bar>
    <FGPhoneForm ref="FGPhoneForm" v-model="formList" :form="formData" />
    <div style="margin: 16px">
      <van-button round block type="info" @click="submitForm">提交</van-button>
      <van-button
        round
        plain
        block
        style="margin-top: 15px"
        type="info"
        @click="resetForm"
        >重置</van-button
      >
    </div>
  </div>
</template>

<script>
import FGPhoneForm from "./FGPhoneForm.vue";
export default {
  components: { FGPhoneForm },
  name: "apply",
  data() {
    return {
      formList: [
        {
          __config__: {
            label: "单行输入框",
            labelWidth: null,
            showLabel: true,
            changeTag: true,
            tag: "form-input",
            tagType: "input",
            tagIcon: "input",
            required: true,
            span: 24,
            regList: [],
            formId: "field18tubkiwkv7k",
            renderKey: "field18tubkiwkv7k",
          },
          __slot__: {
            prepend: "",
            append: "",
          },
          placeholder: "请输入",
          clearable: true,
          type: "String",
          "prefix-icon": "",
          "suffix-icon": "",
          maxlength: 255,
          "show-word-limit": false,
          disabled: false,
          readonly: false,
          showonly: false,
          isHide: false,
          isLock: false,
          __vModel__: "field18tubkiwkv7k",
        },
        {
          __config__: {
            label: "单行输入框",
            labelWidth: null,
            showLabel: true,
            changeTag: true,
            tag: "form-input",
            tagType: "input",
            tagIcon: "input",
            required: true,
            span: 24,
            regList: [],
            formId: "field6wbgrk500z80",
            renderKey: "field6wbgrk500z80",
          },
          __slot__: {
            prepend: "",
            append: "",
          },
          placeholder: "请输入",
          clearable: true,
          type: "String",
          "prefix-icon": "",
          "suffix-icon": "",
          maxlength: 255,
          "show-word-limit": false,
          disabled: false,
          readonly: false,
          showonly: false,
          isHide: false,
          isLock: false,
          __vModel__: "field6wbgrk500z80",
        },
        {
          __config__: {
            label: "单行输入框",
            labelWidth: null,
            showLabel: true,
            changeTag: true,
            tag: "form-input",
            tagType: "input",
            tagIcon: "input",
            required: true,
            span: 24,
            regList: [],
            formId: "field7b0ewzg2qa80",
            renderKey: "field7b0ewzg2qa80",
          },
          __slot__: {
            prepend: "",
            append: "",
          },
          placeholder: "请输入",
          clearable: true,
          type: "String",
          "prefix-icon": "",
          "suffix-icon": "",
          maxlength: 255,
          "show-word-limit": false,
          disabled: false,
          readonly: false,
          showonly: false,
          isHide: false,
          isLock: false,
          __vModel__: "field7b0ewzg2qa80",
        },
      ],
      formData: {
        field6wbgrk500z80: "1",
        field18tubkiwkv7k: "1",
        field7b0ewzg2qa80: "1",
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs["FGPhoneForm"].validateForm((valid, form, value) => {
        if (valid) {
          // 表单校验通过
          this.$store.commit("SET_FORMDATA", value);
        } else {
          console.log("表单校验失败");
        }
      });
    },
    resetForm() {
      this.$refs["FGPhoneForm"].resetForm();
    },
  },
};
</script>
<style scoped>
.van-nav-bar {
  border-bottom: 0;
}

.van-hairline--bottom::after {
  border-bottom: 0;
}
</style>
